<script setup lang="ts">
import VueFlow from './modules/vue-flow.vue';
</script>

<template>
  <div class="h-full">
    <ACard size="small" class="h-full flex flex-col shadow-sm" :body-style="{ padding: '10px' }">
      <!-- 完整的Vue Flow视图 -->
      <div class="flow-container flex-1">
        <VueFlow />
      </div>
    </ACard>
  </div>
</template>

<style scoped>
/* Vue Flow 容器样式 */
.flow-container {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%; /* 添加height: 100%确保容器有明确高度 */
  width: 100%; /* 添加width: 100%确保容器有明确宽度 */
}

/* 确保卡片内容区域占满剩余空间 */
:deep(.ant-card-body) {
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
